<template>
  <view
    v-if="controller.state.visible"
    :class="[
      ns.b(),
      ns.m(modelData.codeName),
      ns.is('loading', controller.state.loading),
      ...controller.containerClass,
    ]"
  >
    <button
      :disabled="controller.state.disabled"
      :loading="controller.state.loading"
      hover-class="button-hover"
      @click="onClick"
      size="mini"
    >
      <view :class="ns.b('content')">
        <i-biz-icon
          :class="ns.bm('content', 'icon')"
          :icon="modelData.sysImage"
        />
        <view :class="ns.bm('content', 'caption')">
          {{ modelData.showCaption ? captionText : null }}
        </view>
      </view>
    </button>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { FormButtonController } from "@ibiz-template/runtime";
import { IDEFormButton } from "@ibiz/model-core";
import { PropType, computed } from "vue";

const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormButton>,
    required: true,
  },
  controller: {
    type: Object as PropType<FormButtonController>,
    required: true,
  },
});
const ns = useNamespace("form-button");

// 动态标题
const captionText = computed(() => {
  const { caption, captionItemName, capLanguageRes } = props.modelData;
  if (captionItemName && props.controller.data[captionItemName]) {
    return props.controller.data[captionItemName];
  }
  let text = caption;
  if (capLanguageRes) {
    text = ibiz.i18n.t(capLanguageRes.lanResTag!, caption);
  }
  return text;
});

// 点击
const onClick = (event: MouseEvent) => {
  props.controller.onClick(event);
};
</script>

<style lang="scss">
@import "./i-biz-form-button.scss";
</style>
